import styled from 'styled-components'

export const BannerWrap = styled.div`
  display: flex;
  position: relative;
  background: url(${props => props.bg}) center center/6000px;

  .banner {
    width: 730px; 

    img {
      width: 750px;
      height: 285px;
    }
  }

  .opt {
    .btn {
      position: absolute;
      width: 37px;
      height: 63px;
      cursor: pointer;
      top: 50%;
      transform: translateY(-50%);
      background:  url(${require('@/assets/img/banner_sprite.png').default});

      &:hover {
        background-color: rgba(0,0,0,.3);
      }
    }

    .prev {
      left: -50px;
      
      background-position: 0 -360px;
    }

    .next {
      right: -50px;
      background-position: 0 -508px;
    }
  }

  .download {
    display: inline-block;
    width: 254px;
    height: 285px;
    background: url(${require('@/assets/img/download.png').default}) no-repeat 0 0;
    background-size: 100% 130%;
  }

  .dot {
    margin:  0 auto;
    
    li {
      width: 20px;
      height: 20px;
      background: url(${require('@/assets/img/banner_sprite.png').default}) no-repeat 3px -343px;
      transition: none;
      cursor: pointer;
      button {
        /* display: none; */
        display: none;
        
      }

      &.slick-active {
        background-position: -16px -343px;;
      }
    }
  }

`
